草莓學習了幾天的 CSS 知識，打算加緊做點練習熟悉一下。

「草莓在寫網頁呀？」熊熊拿了兩杯咖啡回來。

「對啊，我在想辦法讓圖片出現在畫面的正中央，好像比想像中還要麻煩耶？」草莓說。

「垂直置中是個很古老的網頁排版問題囉！不過也因為它夠 old-school ，所以也有不少開發者提出對應的解法～」

「熊熊你可以說幾個來聽聽嗎？」

「沒有問題呀，我們先來看看你目前的架構。」

<div class="img_wrapper">
  <img src="https://i.imgur.com/NXvTU56.jpg" alt="">
</div>

.img_wrapper {
  border: 1px solid black;
}

img {
  width: 300px;
}

「看起來草莓你現在在畫面的最左側，那我們先來用一招試試看。」

.img_wrapper {
  border: 1px solid black;
}

img {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
}

「這樣我們就可以得到一隻垂直置中的草莓囉！」

「這段 CSS 是什麼意思呢？」草莓問說。

「在 CSS 中有許多種定位方式，這裡我們可以使用絕對定位的特性，給予要置中的圖片左邊和上邊都偏移 50%，最後再藉著盒子模型中學過的 margin，設定成自身一半的高度，就能做到置中的效果了～」

「可是如果圖片寬高不確定的話，不就是要一直去計算嗎？」

「沒錯，所以這個方法的缺點也很明顯，還好我們有第二種方案可以使用。」熊熊說。

.img_wrapper {
  border: 1px solid black;
}

img {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

「好神奇呀，這個語法好像魔法耶」草莓說。

「沒錯，我們可以善用 CSS 提供的絕對定位，針對圖片的 top 和 left 設定為 50%，最後再透過 translate 位移要置中圖片自身的寬與高 50%，就大功告成囉，這個方法就不必再去自己計算，所以會方便許多喔！」

「最後再講一個，語法上也比前面兩個精簡很多喔！」

.img_wrapper {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

img {
  width: 300px;
}

「好多沒看過的東西喔！」草莓歪頭。

「這個是 CSS 內建的排版方式，它叫做 Flexbox，最簡單的用法就是先在圖片的父層設定好 display，在預設情況下，justify-content 是水平方向的，align-items 則是垂直方向的，都給他們 center 就能讓圖片放置在畫面的正中央囉！」

「雖然 Flexbox 還不大會使用，可是這個寫法簡單好多喔！」草莓說。

「沒關係，繼續學習前端，你就會發現它有多好用了～」熊熊鼓勵著草莓。

明日待續～